<div class="judul"><?php echo anchor("/raport/", $title);?></div>
<?php
  $flashdata = $this->session->flashdata('message');
  $messages = isset ($flashdata)?pesan($flashdata):"";
  echo "$messages";
?>
<script type="text/javascript">
    $(document).ready(function(){
        $('#adik_asuh').focus();
        $('input[type=submit]').click(function(){
            if($('#adik_asuh').val() == ""){
                alert('Nama adik asuh tidak boleh kosong');
                $('#adik_asuh').focus();
                return false;
            }
            if($('#id_adik_asuh').val() == ""){
                alert('Pilih nama adik asuh dengan benar');
                $('#adik_asuh').focus();
                return false;
            }
            var jumlahMapel = $('.mapel_tr').length,
            i = 0,
            isi = false;
            for(i=1;i<=jumlahMapel;i++){
                if($('#id_mapel'+i).val() != ""){
                    if($('#kkm'+i).val() == "" || ($('#kkm').val()*1) == 0){
                        alert('KKM tidak boleh kosong');
                        $('#kkm'+i).focus();
                        return false;
                    }
                    if($('#nilai_angka'+i).val() == ""){
                        alert('Nilai angka tidak boleh kosong');
                        $('#nilai_angka'+i).focus();
                        return false;
                    }
//                    if($('#nilai_terbilang'+i).val() == ""){
//                        alert('Nilai terbilang tidak boleh kosong');
//                        $('#nilai_terbilang'+i).focus();
//                        return false;
//                    }
                    isi = true;
                }
            }
            if(!isi){
                alert('Inputan mata pelajaran masih kosong');
                return false;
            }
        
            var jumlahEkskul = $('.ekskul_tr').length,
            j = 0,
            status = false;
            for(j=1;j<jumlahEkskul;j++){
                if($('#id_ekskul'+j).val() != ""){
                    if($('#predikat'+j).val() == ""){
                        alert('Predikat harus dipilih');
                        $('#predikat'+j).focus();
                        return false;
                    }
                    status = true;
                }
            }
            if(!status){
                alert('Inputan Ekstrakulikuler masih kosong');
                return false;
            }
        })
    })
</script>
<script type="text/javascript">
$(document).ready(function(){   
  $('#adik_asuh').autocomplete("<?php echo site_url('ajax_target/searchAdikAsuhRaport');?>",
        {
            extraParams:{
              id_member: function(){
                  return $('#id_member').val();
              }  
            },
            parse: function(data){
                var parsed = [];
                for (var i=0; i < data.length; i++) {
                    parsed[i] = {
                        data: data[i],
                        value: data[i].adik_asuh // nama field yang dicari
                    };
                }
                return parsed;
            },
            formatItem: function(data,i,max){
                var str='<div class=result>'+data.adik_asuh+'<br />Alamat: '+data.alamat+'<br />Sekolah: '+data.sekolah+'</div>';
                return str;
            },
            width: 270, // panjang tampilan pencarian autocomplete yang akan muncul di bawah textbox pencarian
            dataType: 'json' // tipe data yang diterima oleh library ini disetup sebagai JSON
        }).result(
            function(event,data,formated){
                $(this).val(data.adik_asuh);
                $('#id_adik_asuh').val(data.id_adik_asuh);
                $('#alamat').html(data.alamat);
                $('#sekolah').html(data.sekolah);
                $('#id_sekolah').val(data.id_sekolah);
                $('#kelas').html(data.kelas);
                $('#id_kelas').val(data.id_kelas);
                $('#tahun_ajaran').html(data.tahun_ajaran+" "+data.semester);
                $('#id_tahun_ajaran').val(data.id_tahun_ajaran);
        });
})        
function initMapel(counter){
    $(function(){
          $('#mapel'+counter).autocomplete("<?php echo site_url('ajax_target')."/searchMataPelajaranByKelas" ?>",
            {
                extraParams:{
                  id_kelas: function(){
                      return $('#id_kelas').val();
                  }  
                },
                parse: function(data){
                    var parsed = [];
                    for (var i=0; i < data.length; i++) {
                        parsed[i] = {
                            data: data[i],
                            value: data[i].batch // nama field yang dicari
                        };
                    }
                    return parsed;
                },
                formatItem: function(data,i,max){
                    return '<div class=result>'+data.nama+'<br>Kelas: '+data.kelas+" "+data.tingkat_pendidikan+'</div>';
                },
                width: 300, // panjang tampilan pencarian autocomplete yang akan muncul di bawah textbox pencarian
                dataType: 'json' // tipe data yang diterima oleh library ini disetup sebagai JSON
            }).result(
            function(event,data,formated){
               $(this).attr('value',data.nama);
               $('#id_mapel'+counter).val(data.id);
            });
        });
}
function initEkskul(counter){
    $(function(){
          $('#ekskul'+counter).autocomplete("<?php echo site_url('ajax_target')."/searchEkstrakulikuler" ?>",
            {
                parse: function(data){
                    var parsed = [];
                    for (var i=0; i < data.length; i++) {
                        parsed[i] = {
                            data: data[i],
                            value: data[i].batch // nama field yang dicari
                        };
                    }
                    return parsed;
                },
                formatItem: function(data,i,max){
                    return '<div class=result>'+data.nama+'</div>';
                },
                width: 300, // panjang tampilan pencarian autocomplete yang akan muncul di bawah textbox pencarian
                dataType: 'json' // tipe data yang diterima oleh library ini disetup sebagai JSON
            }).result(
            function(event,data,formated){
               $(this).attr('value',data.nama);
               $('#id_ekskul'+counter).val(data.id);
            });
        });
}
</script>
<?php
echo form_open($subLink);
?>
<div class="data-input">
    <fieldset>
        <legend><?php echo "$formTitle";?></legend>
        <table width="100%">
            <tr>
                <td valign="top">
                    <label>Member</label><span style="font-size: 11px;padding-top: 7px;"><?php echo $this->session->userdata('nama');?></span>
                    <input type="hidden" name="id_member" id="id_member" value="<?php echo $this->session->userdata('id_member');?>"/>
                    <label>Adik Asuh</label><?php echo form_input("adik_asuh", "", "id='adik_asuh'");?>
                    <input type="hidden" name="id_adik_asuh" id="id_adik_asuh"/>
                    <label>Alamat</label><span style="font-size: 11px;padding-top: 7px;" id="alamat"></span>
                    <label>Sekolah</label><span style="font-size: 11px;padding-top: 7px;" id="sekolah"></span>
                    <input type="hidden" name="id_sekolah" id="id_sekolah"/>
                    <label>Kelas</label><span style="font-size: 11px;padding-top: 7px;" id="kelas"></span>
                    <input type="hidden" name="id_kelas" id="id_kelas"/>
                    <label>Tahun Ajaran</label><span style="font-size: 11px;padding-top: 7px;" id="tahun_ajaran"></span>
                    <input type="hidden" name="id_tahun_ajaran" id="id_tahun_ajaran"/>
                    <label>Kelakuan</label>
                    <?php echo dropdownPredikat("kelakuan","kelakuan");?>
                    <label>Kerajinan</label>
                    <?php echo dropdownPredikat("kerajinan","kerajinan");?>
                    <label>Kerapian</label>
                    <?php echo dropdownPredikat("kerapian","kerapian");?>
                    <label>Rangking</label><?php echo form_input('rangking','','id="rangking" onkeyup="Angka(this)"');?>
                </td>
                <td valign="top">
                     <fieldset>
                        <legend>Tidak Masuk</legend>
                        <label>Izin</label><?php echo form_input('tidak_masuk_izin','','id="tidak_masuk_izin" onkeyup="Angka(this)"');?>
                        <label>Sakit</label><?php echo form_input('tidak_masuk_sakit','','id="tidak_masuk_sakit" onkeyup="Angka(this)"');?>
                        <label>Tanpa Keterangan</label><?php echo form_input('tidak_masuk_alpha','','id="tidak_masuk_alpha" onkeyup="Angka(this)"');?>
                    </fieldset>
                    <label>Catatan Orang Tua</label><?php echo form_textarea("catatan_ortu", "", "id='catatan_ortu' style='width:23em'");?>
                    <label>Pernyataan</label><?php echo form_textarea("pernyataan", "", "id='pernyataan' style='width:23em'");?>
                </td>
            </tr>    
        </table>
    </fieldset>
</div>
<input type="button" value="Tambah Baris" id="tambah_baris_mapel" class="button" style="margin-bottom: 5px;" />
<br />
<div class="data-list">
    <table id="tbl_mapel" class="table-input" style="width: 90%">
        <tr>
            <th>No</th>
            <th style="width:25%">Mata Pelajaran</th>
            <th style="width:8%">KKM</th>
            <th style="width:8%">Nilai Angka</th>
            <th style="width:25%">Nilai Terbilang</th>
            <th style="width:25%">Deskripsi Kemajuan Belajar</th>
            <th>Aksi</th>
        </tr>
        <?php
          for($i = 1; $i <= 2; $i++){
        ?>
        <tr class="mapel_tr <?= ($i % 2 == 0) ? 'even' : 'odd' ?>">
            <td style="text-align:center"><?php echo "$i";?></td>
            <td>
              <?php echo form_input("mapel[]", "", "id='mapel$i' style='width:100%'");?>
              <input type="hidden" name="id_mapel[]" id="id_mapel<?php echo "$i";?>"/>  
            </td>
            <td><?php echo form_input("kkm[]", "", "id='kkm$i' style='width:100%'");?></td>
            <td><?php echo form_input("nilai_angka[]", "", "id='nilai_angka$i' style='width:100%'");?></td>
            <td><?php echo form_input("nilai_terbilang[]", "", "id='nilai_terbilang$i' style='width:100%'");?></td>
            <td><?php echo form_textarea("deskripsi[]", "", "id='deskripsi$i' style='width:100%;height:3em'");?></td>
            <td><input type="button" onClick="removeMapel(<?php echo "$i";?>,this)" value="Hapus" /></td>
        </tr>
        <script type="text/javascript">
          initMapel(<?php echo "$i";?>);
        </script>
        <?php
          }
        ?>
    </table>
</div>
<input type="button" value="Tambah Baris" id="tambah_baris_ekskul" class="button" style="margin-bottom: 5px;" />
<br />
<div class="data-list">
    <table id="tbl_ekskul" class="table-input" style="width: 50%">
        <tr>
            <th>No</th>
            <th style="width:50%">Ekstrakulikuler</th>
            <th>Predikat</th>
            <th>Aksi</th>
        </tr>
        <?php
          for($j = 1; $j <= 2; $j++){
        ?>
        <tr class="ekskul_tr <?= ($j % 2 == 0) ? 'even' : 'odd' ?>">
            <td style="text-align:center"><?php echo "$j";?></td>
            <td>
                <?php echo form_input("ekskul[]", "", "id='ekskul$j' style='width:100%'");?>
                <input type="hidden" name="id_ekskul[]" id="id_ekskul<?php echo "$j";?>"/>
            </td>
            <td>
                <?php echo dropdownPredikat("predikat[]","predikat$j");?>
            </td>
            <td><input type="button" onClick="removeEkskul(<?php echo "$i";?>,this)" value="Hapus" /></td>
        </tr>
        <script type="text/javascript">
          initEkskul(<?php echo "$j";?>);
        </script>
        <?php
          }
        ?>
    </table>
</div>
<div class="field-group">
    <?php
      echo form_submit("add", "Simpan", "class='button' style='margin-right:2px'");
      echo form_button('Batal', 'Batal', 'class=button onClick='."javascript:location.href='".base_url()."index.php/raport/'".'');
    ?>
</div>
<?php
echo form_close();
?>
<script type="text/javascript">
    counterMapel = $('.mapel_tr').length+1,
    counterEkskul = $('.ekskul_tr').length+1;
    $(document).ready(function(){
        $('#tambah_baris_mapel').click(function(){
            var countMapel = counterMapel++,
            numberMapel = $('.mapel_tr').length+1;
            var stringMapel = "<tr class='mapel_tr'>"+
                "<td align='center'>"+numberMapel+"</td>"+
                "<td><input type='text' name='mapel[]' id='mapel"+numberMapel+"' style='width:100%' /><input type='hidden' name='id_mapel[]' id='id_mapel"+numberMapel+"'/></td>"+
                "<td><input type='text' name='kkm[]' id='kkm"+numberMapel+"' style='width:100%'/></td>"+
                "<td><input type='text' name='nilai_angka[]' id='nilai_angka"+numberMapel+"' style='width:100%'/></td>"+
                "<td><input type='text' name='nilai_terbilang[]' id='nilai_terbilang"+numberMapel+"' style='width:100%'/></td>"+
                "<td><textarea name='deskripsi[]' id='deskripsi"+numberMapel+"' style='width:23em;height:5em''></textarea></td>"+
                "<td><input type='button' onClick='removeMapel("+numberMapel+",this)' value='Hapus' /></td></tr>";
            $('#tbl_mapel').append(stringMapel);
            if(numberMapel % 2 == 1){
                $('.mapel_tr:eq('+(numberMapel-1)+')').addClass('odd');
            }else if(numberMapel % 2 == 0){
                $('.mapel_tr:eq('+(numberMapel-1)+')').addClass('even');
            }
            initMapel(numberMapel);
        })
        
        $('#tambah_baris_ekskul').click(function(){
            var countEkskul = counterEkskul++,
            numberEkskul = $('.ekskul_tr').length+1;
            var stringEkskul = "<tr class='ekskul_tr'>"+
                "<td align='center'>"+numberEkskul+"</td>"+
                "<td><input type='text' name='ekskul[]' id='ekskul"+numberEkskul+"' style='width:100%'/><input type='hidden' name='id_ekskul[]' id='id_ekskul"+numberEkskul+"'/></td>"+
                "<td><select name='predikat[]' class='predikat' id='predikat"+numberEkskul+"'>"+
                "<option value=''>Pilih predikat</option>"+
                "<option value='A'>A</option>"+
                "<option value='B'>B</option>"+
                "<option value='C'>C</option>"+
                "<option value='D'>D</option>"+
                "</select></td>"+
                "<td><input type='button' onClick='removeEkskul("+numberEkskul+",this)' value='Hapus' /></td></tr>";
            $('#tbl_ekskul').append(stringEkskul);
            if(numberEkskul % 2 == 1){
                $('.ekskul_tr:eq('+(numberEkskul-1)+')').addClass('odd');
            }else if(numberEkskul % 2 == 0){
                $('.ekskul_tr:eq('+(numberEkskul-1)+')').addClass('even');
            }
            initEkskul(numberEkskul);
        })
    })
    
    function removeMapel(count,el){
    var parent = el.parentNode.parentNode;
    parent.parentNode.removeChild(parent);
    var col=$('.mapel_tr');
    var countCollectTr=col.length;
    for(var i=0;i<countCollectTr;i++){
        $('.mapel_tr:eq('+i+')').children('td:eq(0)').html(i+1);
        $('.mapel_tr:eq('+i+')').removeClass('even');
        $('.mapel_tr:eq('+i+')').removeClass('odd');
        if((i+1) % 2 == 1){
            $('.mapel_tr:eq('+i+')').addClass('even');
        }else{
            $('.mapel_tr:eq('+i+')').addClass('odd');
        }
        $('.mapel_tr:eq('+i+')').children('td:eq(1)').children('input[type=text]').attr('id', 'mapel'+(i+1));
        $('.mapel_tr:eq('+i+')').children('td:eq(1)').children('input[type=hidden]').attr('id', 'id_mapel'+(i+1));
        $('.mapel_tr:eq('+i+')').children('td:eq(2)').children('input[type=text]').attr('id', 'kkm'+(i+1));
        $('.mapel_tr:eq('+i+')').children('td:eq(3)').children('input[type=text]').attr('id', 'nilai_angka'+(i+1));
        $('.mapel_tr:eq('+i+')').children('td:eq(4)').children('input[type=text]').attr('id', 'nilai_terbilang'+(i+1));
        $('.mapel_tr:eq('+i+')').children('td:eq(5)').children('textarea').attr('id', 'deskripsi'+(i+1));
    }}

    function removeEkskul(count,el){
    var parent = el.parentNode.parentNode;
    parent.parentNode.removeChild(parent);
    var col=$('.ekskul_tr');
    var countCollectTr=col.length;
    for(var i=0;i<countCollectTr;i++){
        $('.ekskul_tr:eq('+i+')').children('td:eq(0)').html(i+1);
        $('.ekskul_tr:eq('+i+')').removeClass('even');
        $('.ekskul_tr:eq('+i+')').removeClass('odd');
        if((i+1) % 2 == 1){
            $('.ekskul_tr:eq('+i+')').addClass('even');
        }else{
            $('.ekskul_tr:eq('+i+')').addClass('odd');
        }
        $('.ekskul_tr:eq('+i+')').children('td:eq(1)').children('input[type=text]').attr('id', 'ekskul'+(i+1));
        $('.ekskul_tr:eq('+i+')').children('td:eq(1)').children('input[type=hidden]').attr('id', 'id_ekskul'+(i+1));
        $('.ekskul_tr:eq('+i+')').children('td:eq(2)').children('.right').attr('id', 'jumlah'+(i+1));
    }}
</script>